<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>业务分析</title>
    <link rel="stylesheet" href="../../../static/layer/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../../../static/css/font-awesome.min.css" media="all">

</head>
<style>
    .layui-col-left, .layui-col-right, .layui-col-center {
        height: 100%;
        float: left;
    }

    .layui-col-left, .layui-col-right {
        width: 25%;
    }

    .layui-col-center {
        width: 50%;
    }

    .class_num {
        height: 6rem;
        border: 1px solid #6666;
        margin-top: 2rem;
        padding: 0 0 1rem 0;
    }

    .col-center .title_class {
        text-align: center;
        line-height: 5rem;
        font-size: 1.3rem;
    }

    .col-center .val_class {
        text-align: center;
        line-height: 5rem;
        font-size: 1.2rem;
    }

    .col-center {
        height: 100%;
        float: left;
        width: 30%;
    }

    .title_class, .val_class {
        height: 50%;
    }

    .val_class {
        line-height: 3rem;
    }

    .class_echart, .class_table {

        border: 1px solid #6666;
        margin-top: 2rem;
        padding: 0 0 1rem 0;
    }

    .class_echart {
        height: 20rem;
        padding: 1rem;
    }

    .class_table {
        height: 35rem;
    }

    .class_table_title, .class_table_title span {
        height: 5rem;
    }

    .class_table_title span {
        width: 5rem;

    }
    .class_table_title{
        padding: 2rem 0 0 2rem;
        font-size: 1.2rem;
    }


</style>

<body>

<div style="padding: 20px; position: relative;">
    <div class="layui-row operateTable">
        <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
            <input type="text" class="layui-input" id="test1" placeholder="开始时间">
        </div>
        -
        <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
            <input type="text" class="layui-input" id="test2" placeholder="结束时间">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>

    <div class="layui-row class_num">
        <div class="layui-col-left">

        </div>
        <div class="layui-col-center">
            <div class="col-center">
                <div class="title_class wc_class">0</div>
                <div class="val_class">完成业务数量</div>

            </div>
            <div class="col-center">
                <div class="title_class  sh_class">0</div>
                <div class="val_class">审核中业务数量</div>
            </div>
            <div class="col-center">
                <div class="title_class zf_class">0</div>
                <div class="val_class">作废业务数量</div>
            </div>
        </div>
        <div class="layui-col-right">

        </div>
    </div>


    <div class="layui-row class_echart" id="schartMap">

    </div>
    <div class="layui-row class_table">
        <div class="layui-row class_table_title">
            <span>具体明细</span>( <span class="start_time">2017-07-28</span> ~ <span class="end_time">2017-07-28</span>)
        </div>
        <table class="layui-table" id='buildingTable' lay-filter="business">
        </table>
    </div>
</div>

<script type="text/javascript" src="../../../static/layer/layui.js"></script>
<script type="text/javascript" src="../../../static/js/common/dateUtils.js"></script>
<script type="text/javascript" src="../../../static/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../../static/js/echarts.min.js"></script>
<script>
    var option={};
    var table;
    var businessId = "";
    layui.use(['jquery', 'table', 'form', 'layer', 'element', 'laydate'], function () {
        table = layui.table;
        var element = layui.element, //导航的hover效果、二级菜单等功能，需要依赖element模块
            form = layui.form,
            laydate = layui.laydate;

        laydate.render({
            elem: '#test1' //指定元素

        });

        laydate.render({
            elem: '#test2' //指定元素
        });
        $("#test1").val(DateUtils.firstDate());
        $("#test2").val(DateUtils.lastDate());
        $(".start_time").html(DateUtils.firstDate());
        $(".end_time").html(DateUtils.lastDate());


        var active = {
            reload: function () {
                var starTime = $('#test1').val();
                var endTime = $('#test2').val();
                debugger
                reloadTable(starTime, endTime);
                echartList(starTime,endTime);
                $(".start_time").html(starTime);
                $(".end_time").html(endTime);
            },

        };


        active.reload();


        function reloadTable(starTime, endTime) {
            var data = {};

            if (!!starTime) {
                data.starTime = starTime;
            }
            if (!!endTime) {
                data.endTime = endTime;
            }

            data.STATE = "0";

            table.render({
                elem: '#buildingTable',
                url: '/financial/ywlistPage',
                page: true,
                limit: 20,
                height: 'full-150',
                where: data,
                cols: [[
                    {field: 'ROWNUM', fixed: true, width: 70}
                    , {field: 'bill_statue', title: '状态', width: 150}
                    , {field: 'COMPANY_NAME', title: '借款方名称', width: 150}
                    , {field: 'LOAN_PRICE', title: '借款金额（元)', width: 200 , align: 'right'}
                    , {field: 'NAME', title: '创建人', width: 200}
                    , {field: 'CREATE_DATE', title: '创建日期', width: 200}


                ]]
            });
        }

        $('.operateTable .layui-btn').on('click', function () {
            debugger
            var type = $(this).data('type');
            // alert(type);
            active[type] ? active[type].call(this) : '';
        });


    });
    function showData(starTime,endTime) {

        var data = {};

        if (!!starTime) {
            data.starTime = starTime;
        }
        if (!!endTime) {
            data.endTime = endTime;
        }
        $.ajax({
            url: "/financial/findYW",
            dataType: "json",
            data:data,
            type: "post",
            async: false,
            success: function (res) {
                debugger
                if (res.errcode == '0') {
                    var data = res.data;
                    option.series[0].data[0].value= data.wcNum; //完成
                    option.series[0].data[1].value=   data.shNum;  //审核
                    option.series[0].data[2].value= data.zfNum;  //作废
                    $(".wc_class").html(data.wcNum);
                    $(".sh_class").html(data.shNum);
                    $(".zf_class").html(data.zfNum);
                } else {

                }
            }
        });
    }

    /**
     * echart
     */
    function echartList(starTime,endTime) {


        var myChart = echarts.init(document.getElementById('schartMap'));
        option = {
            title: {
                text: '业务分析',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['完成', '审核中', '作废']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 7, name: '完成'},
                        {value: 8, name: '审核中'},
                        {value: 9, name: '作废'},

                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        showData(starTime,endTime);
        myChart.setOption(option);

    }


</script>


<script type="text/javascript" src="../../../static/js/common/authUtils.js"></script>

</body>

</html>